<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../layuiadmin/style/admin.css" media="all">
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/webphone.js" type="text/javascript"></script>
    <script src="../layuiadmin/layui/layui.all.js" type="text/javascript"></script>
    <title>Document</title>
</head>
<body class="layui-layout-body">
<video id="remoteVideo"></video>
<video id="localVideo" muted="muted"></video>

<div class="layui-container">
    <div class="layui-card">
        <div class="layui-card-header">
            WebRTC测试
        </div>
        <div class="layui-card-body">
            <form class="layui-form">
                <div class="layui-form-item">
                    <label for="" class="layui-form-label">当前号码：</label>
                    <div class="layui-form-mid layui-word-aux">9999</div>
                </div>
                <div class="layui-form-item">
                    <label for="" class="layui-form-label">状态：</label>
                    <div class="layui-form-mid layui-word-aux"><span id="status" style="color: #393D49">未连接</span></div>
                </div>
                <div class="layui-form-item">
                    <label for="" class="layui-form-label">被叫号码：</label>
                    <div class="layui-input-block">
                        <input type="text" id="phone" class="layui-input" placeholder="输入被叫号码">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="" class="layui-form-label">操作：</label>
                    <div class="layui-input-block">
                        <div class="layui-btn-container">
                            <button id="invite" type="button" class="layui-btn layui-btn-sm">拨打</button>
                            <button id="terminate" type="button" class="layui-btn layui-btn-sm">挂断</button>
                            <button id="accept" type="button" class="layui-btn layui-btn-sm">接听</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div id="play" style="display:none"></div>
<script type="text/javascript">
    //播放音乐
    function play(type,action){
        if(action=='start'){
            if(type=='ringin'){
                audio='ringin.wav';
                loop=' loop="loop"';
            }else if(type=='ringout'){
                audio='ringout.wav';
                loop=' loop="loop"';
            }else if(type=='hangup'){
                audio='hangup.wav';
                loop='';
            }
            if(type!=''){
                $('#play').html('<audio autoplay="autoplay" '+loop+'><source src="audio/'+audio+'"'
                    + 'type="audio/wav"/><source src="audio/'+audio+'" type="audio/mpeg"/></audio>');
            }
        }else if(action=='end'){
            $('#play').html('');
        }
    }
    var sssss;
    var config = {
        uri: '9999@ssl.nicaicai.top',
        wsServers: ['wss://ssl.nicaicai.top:8089/ws'],
        /*transportOptions: {
            wsServers: ['wss://ssl.nicaicai.top:8089/ws']
        },*/
        authorizationUser: '9999',
        password: 'dgg123456',
        rtcpMuxPolicy: 'negotiate',
        hackWssInTransport: true
    };

    var ua = new SIP.UA(config);

    ua.on('registered', function () {
        $("#status").text('已连接');
        layer.msg('分机号注册成功');
    });
    ua.on('unregistered', function () {
        $("#status").text('未连接');
    });

    //来电
    ua.on('invite', function (session) {
        sssss = session
        var accept = 0
        play('ringin','start');
        layer.confirm('有来电，确认接听？',function () {
            sssss.accept({
                media: {
                    render: {
                        remote: document.getElementById('remoteVideo'),
                        local: document.getElementById('localVideo')
                    },
                    constraints: {
                        audio: true,
                        video: false
                    }
                }
            })
            play('ringin','end');
            accept =1
        })
        if (!accept){
            sssss.terminate();
            play('ringout','end');
        }
    });

    //呼叫
    //sssss = ua.invite('1001@172.16.1.157');

    //拨打
    $("#invite").click(function(){
        var options = {
            media: {
                constraints: {
                    audio: true,
                    video: false
                },
                render: {
                    remote: document.getElementById('remoteVideo'),
                    local: document.getElementById('localVideo')
                }
            }
        };
        var phone = $("#phone").val();
        sss = ua.invite('sip:'+phone+'@ssl.nicaicai.top',options);

        sss.on('failed', function (response, cause) {//呼叫失败
            $("#status").text('呼叫失败');
        });
        sss.on('rejected', function (response, cause) {//无法接通
            $("#status").text('无法接通');
        });
        sss.on('bye', function(request) {//挂机
            $("#status").text('挂机');
        })
        sss.on('terminated', function (message, cause) {//结束
            $("#status").text('结束');
        });
        sss.on('progress', function (response) {
            $("#status").text('拨号中')

        });

    })

</script>
</body>
</html>
